<template>
    <el-footer>
        <div class="footer">
            <div class="footer-top flex-between">
                <div class="flex-center top-left">
                    <dl class="dl-box">
                        <dt class="dl-dt">关于</dt>
                        <dd class="dl-dd">
                            <a href="https://gitee.com/zhong_wei_peng" target="_blank">Gitee</a>
                        </dd>
                        <dd class="dl-dd">
                            <a href="https://w3school.com/" target="_blank">Github</a>
                        </dd>
                    </dl>

                    <dl class="dl-box">
                        <dt class="dl-dt">友情链接</dt>
                        <dd class="dl-dd">
                            <a href="https://vue.cn/" target="_blank">Vue</a>
                        </dd>
                        <dd class="dl-dd">
                            <a href="https://cloud.tencent.com/" target="_blank">腾讯云</a>
                        </dd>
                    </dl>

                    <dl class="dl-box">
                        <dt class="dl-dt">联系</dt>
                        <dd class="dl-dd">
                            <span>问题咨询：QQ 2783335126</span>
                        </dd>
                        <dd class="dl-dd">
                            <span>合作：zwp2282171@163.com</span>
                        </dd>
                    </dl>
                </div>

                <div class="flex-center top-right">
                    <el-image style="width:100px;height:100px" fit="cover" src="https://www.bmob.cn/themes/2016-3/static/css/images/footer-QR.png"></el-image>
                    <p>关注 微信</p>
                </div>
                
            </div>
            <div class="footer-bottom flex-center">
                <p>Copyright © 2022 零云后端 - All rights reserved</p>
            </div>
           
        </div>
    </el-footer>
</template>

<script>
export default {
    name: 'Footer',
    components: {},
    props: {},
    emits: [],
    setup () 
    {
        return {
        };
    }
};

</script>
<style lang='scss' scoped>

@media screen and (min-width: 1200px) {
    .footer {
      max-width: 1000px;
    }
}

.el-footer {
    height: auto;
    background-color: #303834;
    padding: 40px 0 20px;

    .footer {
        width: 100%;
        margin: 0 auto;
    }
}

.footer-top {
    display: flex;
    flex-wrap: wrap;

    
    .top-left {
        flex-wrap: wrap;
        justify-content: flex-start;

        .dl-box {
        font-size: $medium;
        padding: 15px 50px 15px;

            .dl-dt {
                color: white;
                margin-bottom: 10px;
            }

            .dl-dd {
                margin: 3px 0;

                span,a {
                    font-size: $small;
                    color: #7f7f7f;
                }
            }
       }
    }

    .top-right {
        flex-direction: column;
        padding: 0 50px;

        p {
            color: #7f7f7f;
            margin-top: 10px;
            font-size: $small;
        }
    }
}

.footer-bottom {
    padding-top: 100px;
    
    p {
        font-size: $small;
        color: #7f7f7f;
    }
}

</style>
